<template>
  <el-dialog
    v-model="state.dialogVisible"
    :append-to-body="true"
    :before-close="close"
    :close-on-click-modal="true"
    :close-on-press-escape="true"
    :destroy-on-close="true"
    top="5vh"
    :modal="model"
    :title="state.dialogTitle"
    :width="width"
  >
    <el-form
      ref="formRef"
      label-width="100px"
      :model="state.formData"
      :rules="state.formRules"
    >
      <el-form-item label="岗位名称:" prop="jobName">
        <el-input
          v-model="state.formData.jobName"
          :maxlength="32"
          show-word-limit
          type="text"
          @change="handleJobNameChange"
        />
      </el-form-item>
      <el-form-item label="岗位编码:" prop="jobCode">
        <el-input
          v-model="state.formData.jobCode"
          :maxlength="32"
          show-word-limit
          type="text"
        />
      </el-form-item>
      <el-form-item label="排序号:" prop="orderId">
        <el-input
          v-model="state.formData.orderId"
          :maxlength="8"
          type="number"
        />
      </el-form-item>
      <el-form-item label="岗位类别:" prop="classId">
        <easy-dict-select
          ref="classIdRef"
          :default-value="state.formData.classId"
          dict-code="1003"
          show-all="N"
          @change="handleClassIdChange"
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button icon="circle-close" type="warning" @click="close">
        取消
      </el-button>
      <el-button
        :disabled="state.readonly"
        icon="circle-check"
        type="primary"
        @click="save"
      >
        确定
      </el-button>
    </template>
  </el-dialog>
</template>

<script setup name="JobEdit">
import { useMessage } from "@/hooks/message";
import { addJob, updateJob, validJobCode } from "@/api/admin/org/job/";
import EasyDictSelect from "@/components/dictSelect.vue";
import pinyin from "js-pinyin";

const props = defineProps({
  title: {
    type: String,
    default: "岗位"
  },
  width: {
    type: String,
    default: "20%"
  },
  model: {
    type: Boolean,
    default: true
  }
});
const emits = defineEmits(["confirm"]);

const formRef = ref(null);
const classIdRef = ref(null);

const state = reactive({
  readonly: false,
  operationAdd: false,
  formData: {
    id: "",
    jobCode: "",
    jobName: "",
    orderId: 0,
    classId: ""
  },
  dialogTitle: props.title,
  formRules: {
    jobCode: [
      {
        validator: async (rule, value, callback) => {
          if (value === "") {
            callback(new Error("岗位编码不能为空"));
          } else {
            const res = await validJobCode(state.formData);
            if (res.code != 200) {
              callback(new Error(res.msg));
            }
          }
        },
        trigger: "change"
      }
    ],
    jobName: [{ required: true, message: "岗位名称不能为空", trigger: "blur" }],
    orderId: [{ required: true, message: "排序号不能为空", trigger: "blur" }],
    classId: [{ required: true, message: "岗位类别不能为空", trigger: "blur" }]
  },
  dialogVisible: false
});

const show = (row, readonly) => {
  if (readonly) {
    state.readonly = readonly;
    state.dialogTitle = `${props.title}详情`;
  } else {
    state.readonly = false;
  }
  if (row) {
    state.dialogTitle = `修改${props.title}`;
    state.formData.id = row.id;
    state.formData.jobCode = row.jobCode;
    state.formData.jobName = row.jobName;
    state.formData.orderId = row.orderId;
    state.formData.classId = row.classId;
  } else {
    state.operationAdd = true;
    state.dialogTitle = `新增${props.title}`;
  }
  state.dialogVisible = true;
};

const close = () => {
  formRef.value.resetFields();
  state.readonly = false;
  state.operationAdd = false;
  state.dialogTitle = props.title;
  state.formData = {
    id: "",
    jobCode: "",
    jobName: "",
    orderId: 0,
    classId: ""
  };
  state.dialogVisible = false;
};

const save = () => {
  formRef.value.validate(async valid => {
    if (valid) {
      let data;
      if (state.operationAdd) {
        data = await addJob(state.formData);
      } else {
        data = await updateJob(state.formData);
      }
      const msg = data.msg;
      useMessage().success(msg);
      emits("confirm", {});
      close();
    }
  });
};

const handleClassIdChange = val => {
  state.formData.classId = val;
};

const handleJobNameChange = val => {
  const jobCode = pinyin.getCamelChars(val);
  state.formData.jobCode = jobCode;
};

defineExpose({
  show,
  close,
  save
});
</script>

<style lang="scss" scoped>
.el-input__inner {
  width: 140px;
}
</style>
